import { useState } from 'react';
import { Link, Navigate, useLocation } from 'react-router-dom';

import { Breadcrumb, Menu } from 'antd';
import cs from 'classnames';
import { observer } from 'mobx-react-lite';

import { useStore } from '@/store';
import { useLayoutStore } from '@/store/layout';

import { Icon } from '@iconify/react';

import Header from './header';
import styles from './index.module.scss';
import KeepAliveOutlet from './keepAliveOutlet';
import Tabs from './tabs';

const BasicLayout: React.FC = () => {
  const location = useLocation();
  const store = useStore();
  const [collapsed, setCollapsed] = useState(false);
  const layoutStore = useLayoutStore();

  if (!store.isLogin) {
    return (
      <Navigate
        to={{
          pathname: '/user/login',
          search:
            location.pathname && location.pathname !== '/' ? `?redirect=${location.pathname}` : ''
        }}
      />
    );
  }

  return (
    <div
      className={cs(styles['basic-layout'], {
        // TODO
        [styles['width-sider']]: layoutStore.matchRoute?.sider !== false,
        [styles['collapsed']]: collapsed
      })}
    >
      {/* header */}
      <Header />
      {/* end header */}

      {/* sider */}
      <div className={styles['sider']}>
        <div className={styles['menu']}>
          <Menu
            mode="inline"
            theme="dark"
            style={{ overflowY: 'auto', height: 'calc(100vh - 50px)', paddingBottom: '30px' }}
            selectedKeys={layoutStore.selectedKeys}
            openKeys={layoutStore.openKeys}
            onOpenChange={(keys) => {
              layoutStore.openKeys = keys;
            }}
            inlineCollapsed={collapsed}
            items={layoutStore.subMenu}
          />
        </div>

        <div className={styles['sider-footer']}>
          <div onClick={() => setCollapsed(!collapsed)}>
            {collapsed ? (
              <Icon fontSize={24} icon="ri:contract-right-line" />
            ) : (
              <Icon fontSize={24} icon="ri:contract-left-line" />
            )}
          </div>
        </div>
      </div>
      {/* end sider */}

      {/* tabs */}
      <Tabs />
      {/* tabs */}

      {/* content */}
      {layoutStore.matchRoutes?.some((v) => v?.layout === false) ? (
        <KeepAliveOutlet />
      ) : (
        <div className={styles['content']}>
          <Breadcrumb
            className={styles['breadcrumb']}
            items={layoutStore.breadcrumb.map((item, index) => {
              return {
                title:
                  index < layoutStore.breadcrumb.length - 1 && item.path && item.element ? (
                    <Link to={item.path}>{item.name}</Link>
                  ) : (
                    item.name
                  )
              };
            })}
          />
          <div className={styles['content-inner']}>
            <KeepAliveOutlet />
          </div>
        </div>
      )}
      {/* end content */}

      {/* footer */}
      {/* <div className={styles['footer']}>
        <div className={styles['copyright']}>
          { import.meta.env.VITE_COPYRIGHT }
        </div>
      </div> */}
      {/* end footer */}
    </div>
  );
};

export default observer(BasicLayout);
